/*
blue 
    normal      : rgba(20, 120,255,1)
    highlight   : rgba(0, 50, 255, 1)
    table header: rgba(0, 50, 255, 0.8)
    table row   : rgba(0, 150, 255, 0.5);

purple
    normal      : #DFABF5
    highlight   : #A21FA2
	
	12pt = 16px = 1em = 100%

	<frame>
				<header>
								<logo>
											<logotext><counter>
								<menu>
				<site_content>
	'New Gulim'
*/


@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);  			/* font-family: 'Nanum Gothic', serif; */
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);  	/* font-family: 'Nanum Myeongjo', serif; */
@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);				/*  font-family: 'Jeju Gothic', serif; */
@import url(http://fonts.googleapis.com/earlyaccess/jejuhallasan.css);				/*  font-family: 'Jeju Hallasan', serif; */
@import url(http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css);			/* font-family: 'Jeju Myeongjo', serif; */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&family=Open+Sans&display=swap'); /* font-family: 'Noto Sans KR', sans-serif; */ 
@import url("http://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700");	/* font-family: 'Roboto', sans-serif; */


html{ 
	height			: 98%;
}

*{
	margin: 0;
	padding: 0;
}

body	{
    width 			: 100%;
    height 			: 100%;
	text-align		: center;
	background-color : white;
    font-weight		: normal;
    font-size 		: 0.9em;
    font-family 	: 'Arial', 'Nanum Gothic', serif;
    color: black;
}

a{
    outline: none;
    text-decoration: none;
/*    color: #009FBC; */
	text-align	: center;
	
}


a.logo{
    outline: none;
    font-weight 	: bold;
    font-size 		: 1.2em;
    text-decoration: none;
/*    color: grey;  */
}

img {
	margin : 10px 10px 10px 10px;
}

div	{
	line-height		: 1.5em;	
    vertical-align	: middle;	
	text-align		: left;
    width 			: 100%;
	display			: inline-block;
	
	padding			: 0em;
	margin			: 0em;
	font-size 		: 1.0em;
}

div.frame{
	width 			: 1200px;
    height 			: 100%;
	
	padding			: 0px;
	margin			: auto;
/*	
border		: solid 1px violet;	
*/
}

div.env	{ 
		display:inline-block; 
		width:100%; 
		margin:0px; 
		padding:0px;
}



div.parag 	{ display : inline-block; width : 100%; text-align	: left;}
div.parah 	{ display : inline-block; width : 49%; text-align	: left;}		

div#header {
/*	height		: 6.0em;	*/

  border-bottom		: solid 1px lightgrey;
}

#logo_text {
	text-align	: left;
}
#counter {
	text-align	: right;
	padding		: 0px;
	font-size 	: 1.0em;
}


#site_content
{ 
    width: 1200px;
    margin: 10px auto 0 auto;
/*
    border : solid 1px violet;
    position: relative;
    width:100%;
    border : solid 5px violet;
    border : solid 1px blue;
*/
}
  
div.content
{
	width : 98%;
	text-align	: center;
	padding : 10px;
}

div.logo
{
	width		: 100%;
	font-size 	: 1.5em;
	text-align	: left;
	margin		:0px;
	padding		:auto;
	vertical-align : middle;
	display:inline-block;
}

div#logo1 {
	text-align	: center;
	margin		: 0px;
	padding		: auto;
}

div#logo1 a {
	vertical-align 	: middle;
	line-height		: 2.3em;
    font-weight 	: bold;
    font-size 		: 2em;
    color: grey;
	
}

div#logo1 a:hover {
    color: darkgrey;
}


div#header2 {
	display:inline-block;

}

div#subtitle {
	width:30%;
	height : 2.5em;
	position:absolute;
	text-align:center;
    font-weight 	: bold;
    font-size 		: 1.5em;
	vertical-align 	: middle;
	line-height		: 2.0em;

}

div#menutop {
	width:100%;
	height : 2.5em;
	display:inline-block;
	text-align:right;
	vertical-align 	: middle;
	line-height		: 1.0em;
    font-size 		: 1.0em;
}

div#menubot {
	width:100%;
	height : 2.5em;
	display:inline-block;
	vertical-align 	: middle;
	line-height		: 1.0em;
    font-size 		: 1.0em;
}


div.main {
	height		: 800px;
/*
	border		: solid 1px cyan;	
*/
	
	margin-Top	: 0.5em;
	margin-Bottom	: 1em;
	
	position	: relative;
}

div.float_left{
	width		:190px;
	height		:100%;
	padding		:0px;
	margin		:0px;
	float			:left;
	
/*
	border		: solid 1px blue;
*/
}

div.float_right{
	width		:990px;
	height		:100%;
	padding		:0px;
	margin		:0px;
	float			:right;
/*
	border		: solid 1px green;
*/
}

div.title {
	width		: 100%;
	font-size 	: 1.5em;
	text-align	: left;
	margin		:0px;
	padding		:0px;
/*
	border		: solid 1px green;
*/
}

div.hmenu {
	width		: 100%;
	text-align	: right;
	margin		: 0px;
	padding		:0px;
}

div.container
{ 
	width : 95%;
	max-width : 100%;
	border: 1px solid #BBB;
	padding-top : 1em;
	padding-left : 2em;
	padding-bottom : 1em;
	overflow: auto;
}

div.p1{	
	font-weight 	: bold;
	font-size 		: 1.3em;
	padding-left 	: 1.0em;
	margin-Bottom 	: 0.5em;
}
div.p11{	
	font-weight 	: bold;
	font-size 		: 1.2em;
	padding-left 	: 1.5em;
	margin-Bottom 	: 0.5em;
}
div.p111{	
	font-weight 	: bold;
	font-size 		: 1.1em;
	padding-left : 1.2em;
	margin-Bottom : 0.5em;
}
div.ptext{	
	padding-left : 1.5em;
	margin-Bottom : 0.5em;
}

/* H tags */

h1 {
	display			: block;
	font-size		: 1.5em;
	margin-top		: 0.67em;
	margin-bottom	: 0.67em;
	margin-left		: 0.1em;
	margin-right	: 0;
	font-weight		: bold;
	text-align		: left;
}
h2 {
	display			: block;
	font-size		: 1.2em;
	margin-top		: 0.3em;
	margin-bottom	: 0.3em;
	margin-left		: 0.2em;
	margin-right	: 0;
	font-weight		: bold;
	text-align		: left;
}
h3 {
	display			: block;
	font-size		: 1.0em;
	padding-left	: 3em;
	font-weight		: normal;
	text-align		: left;
	/*
	border			: solid 1px red;
	margin-top		: 0.67em;
	margin-bottom	: 0.67em;
	*/
}
h4 {
	display			: block;
	font-size		: 1.0em;
	padding-left	: 4em;
	font-weight		: normal;
	text-align		: left;
}
h5 {
	display			: block;
	font-size		: 1.0em;
	padding-left	: 5em;
	font-weight		: normal;
	text-align		: left;
}

/*	Input Tags 
*/

input{
	display			: inline-block;
	font-family		: verdana;
	font-size 		: 0.9em;
    line-height		: 2.0em;
	text-align		: center;	
	padding-right	: 0.5em;
	width			: 100px;
}
/*	P Tags */
p {	
	width 			: 100%;
    line-height		: 1.5em;
	padding-left 	: 2.0em;
	padding-right	: 2.0em;
	text-align		: left;
	display			: inline-block;	
	font-size 		: 0.9em;
}

p.p1 {	
	font-weight 	: bold;
	font-size 		: 1.3em;
	margin-Bottom	: 0.5em;
}

p.p11 {
	font-weight 	: bold;
	font-size 		: 1.2em;
	padding-left 	: 2.2em;
	margin-Bottom	: 1.0em;
	
}

p.p111 {
	font-weight 	: bold;
	font-size 		: 1.1em;
	margin-Bottom	: 1.0em;
	
}

p.ptext {
	padding-left 	: 3.0em;
	margin-Bottom	: 1.0em;
}

span{
	line-height		: 2.0em;	
    display			:	inline-block; 
    vertical-align	:	middle;
}

span.counter   { 
	width           : 50px; 
	font-size 		: 1.0em;
	line-height		: 2.0em;	
    display			:	inline-block; 
    vertical-align	:	middle;
	text-align		: right;	
	color			: darkgrey;
}
span.counter_total   { 
	width           : 100px; 
	font-size 		: 1.0em;
	line-height		: 2.0em;	
    display			:	inline-block; 
    vertical-align	:	middle;
	text-align		: right;	
	color			: darkgrey;
}

span.logo_colour   { 
    color: grey;
}
span.logo_colour:hover   { 
    color: darkgrey;
}

span.title		{ display : inline-block; width : 350px; text-align	: left; margin-left:30px;}
span.text		{ display : inline-block; width : 100px; text-align	: right; border-bottom : solid 1px black;}
span.text300	{ display : inline-block; width : 300px; text-align	: right; border-bottom : solid 1px black;}
span.unit		{ display : inline-block; width : 50px; text-align	: left; }

span.eq1		{ display : inline-block; width : 20px; text-align	: left; margin-right : 30px;}
span.eq200		{ display : inline-block; width : 200px; text-align	: left; margin-right : 30px; }

span.short  { width           : 150px; }
span.middle { width         : 250px; }
span.long   { width           : 400px; }
span.unit   { width           : 80px; text-align:center; display			:	inline-block;  }


span.saju 	{ width:200px; color : black; }
span.s80 	{ width:80px; color : black; }
span.s80c 	{ width:80px; text-align: center; }
span.s150 	{ width:150px; color : black;   text-align: center; }
span.s200 	{ width:200px; color : black; }

.sajudate{
	width:100px;  
	height : 2em;
}		
.sajudat option{
	width:100px;   
	height : 2em;
}

div.env	{ 
		display:inline-block; 
		width:100%; 
		margin:5px; 
		padding:0px;
}


input.chkbox{
	
  width:30px;
  height:30px;
}

/*
---------------------------------------
	Horizontal Navigator
---------------------------------------
*/  
ul.hmenu {
	list-style-image		: none;
	list-style		: none;
	padding-right		: 20px;
    float: right;
}

ul.hmenu li {	
	float 		: left;
	margin		: 0px 10px 0px 10px ;	
	/*
	list-style-image: url("../icon/minus.png");
	padding				: 0px;
	margin				: 0px 0px 0px 10px ;	
	marginLeft			: 20px ;	
	padding				: 0 0 3px 10px;
	line-height 			: 1.5em;
	list-style-type		: none;
	*/
}

ul.hmenu li:hover{	
	color : orangered;
}



		ul.img { 
			height:2.5em;
		}
		
		ul.img_square li { 
			margin: 0;
			padding-left: 20px;
			list-style: none;
			background-image: url( "/icon/list_square.jpg");
			background-position: left center;
			background-repeat: no-repeat;
			background-size:10px;
		}

		ul.img_check li { 
			margin-left: 30px;
			padding-left: 20px;
			list-style: none;
			background-image: url( "/icon/check-clean.png");
			background-position: left center;
			background-repeat: no-repeat;
			background-size:10px;
		}



/*********************************************************************/ 
/* Drop Down Menu CSS                                                */
.menubar { 
  position	: relative;
  width		: 1200px;
  text-align	: right;
/*

  margin-left: auto; 
  margin-right: auto;
*/
  
} 

.menubar 	ul {
/*			
	border		: solid 1px blue;
*/
}	

.menubar  ul li	{
	list-style  	: none; 	
		
	width       	: 130px;
	text-align		: center;
	line-height		: 2.5em;
	display     	: inline-block; 	
}

.menubar ul li a
{ 
	text-align		: center;
	text-decoration	: none;
    vertical-align	: bottom;
	font-weight : normal ;
	color : black;
	height : 2.5em;
	vertical-align : middle;
	
} 

.menubar  ul li.selected a	{
	color: black;
	font-weight : bold;
/*			
	color: rgb(51, 204, 51); // green
*/
}
.menubar  ul li:hover a	{
	font-weight : normal;
	background : grey;
	color : white;
	display : block;
	height: 2.5em;
	vertical-align : middle;
	opacity:0.5;
}

/*...First-Level...
.menubar 	ul li:hover	  ul								  {	z-index:9999; display:none;  padding: 0 0 0 0px ; }
.menubar ul li   	ul 	li			{ display:inline-block;  line-height:2.0em;  text-align: center; vertical-align :	middle; }
*/
.menubar ul li 		 	ul				{ position:absolute; display: none;  }
.menubar ul li:hover	ul  			{ display: block; z-index:9999;background: rgb(240,240,240); }  /* z-index 중요함.. */ 

.menubar ul li 		 	ul  li			{ display: block; width : 130px; }  /* 수직으로 드랍다운 */ 
.menubar ul li:hover   	ul 	li		 a	{ color: grey; font-weight : normal; height: 2.5em;}			/* hovering 시 폰트색상 변경 */ 
.menubar ul li:hover   	ul 	li:hover a	{ color: white; font-weight : normal; height: 2.5em; vertical-align : middle;}
/*********************************************************************/




#plotlychart .modebar {
	width : 1.5em	;
	right : 10px;	

}